<template>
<!-- 防疫监控算法页 -->
  <div class="moniter-page">
    <!-- header 部分 -->
    <top-bar class="header">
      <template v-slot:left></template>
      <template v-slot:center>
        <img
          src="../../assets/img/viruswatcher.png"
          alt="疫情守望者"
          @click="back_button"
          style="height: 32px;cursor: pointer;">
      </template>
      <template v-slot:right>
        <button @click="getPerson">开启</button>
      </template>
    </top-bar>

    <!-- content 部分 -->
    <moniter-page-content />
  </div>
</template>

<script setup>
import { defineEmits } from 'vue'
import getData from './service/index'

import topBar from '../../components/content/top_bar/top_bar.vue'
import moniterPageContent from './child_comps/moniter-page-content.vue'

const emit = defineEmits(['changePage']);

// 获取后端接口返回的人数
const { fetchData } = getData()

/**
 * 函数相关
 */
const back_button = () => {
  emit('changePage', 'lar');
}

const getPerson = () => {
  setInterval(() => {
    fetchData()
  }, 1000)
}

</script>

<style scoped>
  .header {
    position: relative;
    z-index: 10;
    box-shadow: 0 10px 20px rgba(60, 60, 60, 0.1);
  }
</style>